<template>
    <el-popover placement="top" :show-arrow="false" :width="820" popper-class="bj_pop" trigger="hover">
        <template #reference>
            <div v-if="showdrag" id="ssbj_pop" v-drag="{ dragvalue }" class="bj"
                :class="[data.length == 0 ? 'nobj_bg' : 'bj_bg']" @click="" ref="dragElement">
                <div class="bjsl">
                    <span>{{ conutbaojing }}</span><span class="unit">条</span>
                </div>
            </div>
        </template>
        <div v-if="data.length != 0" style="padding:10px;">
            <div style="display: flex;justify-content: center;">
                <span style="font-weight: 700;letter-spacing: 10px;">声波报警</span>
            </div>
            <div style="position: relative;">
                <el-table :data="state.tableData" stripe style="width: 100%">
                    <el-table-column label="序号" type="index" width="50" />
                    <el-table-column prop="num1" label="报警时间" width="180" />
                    <el-table-column prop="num2" label="地点" width="100" />
                    <el-table-column prop="num3" label="分站" width="80" />
                    <el-table-column prop="num4" label="报警类型" width="100" />
                    <el-table-column prop="num5" label="报警等级" width="100" />
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <div>
                                <el-button type="text">视频</el-button>
                                <el-button type="text">呼叫</el-button>
                                <el-button type="text">解除报警</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top: 10px;" background v-model:current-page="state.pageconfig.currentPage"
          v-model:page-size="state.pageconfig.pageSize" :page-sizes="[20, 40, 60, 80, 120, 200]"
          layout=" prev, pager, next, sizes, jumper,total" :total="state.pageconfig.total * 1"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </el-popover>
</template>

<script setup>
import { onMounted, onUnmounted, reactive } from "vue";

import { routerKey, useRoute } from "vue-router";
let store = useStore()
const router = useRouter();
const dragElement = ref(null);

let showdrag = ref(true)
let dragvalue = ref(true)
let conutbaojing = ref(1)
let data = ref([1])

let state = reactive({
    pageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 100,
  },
    tableData: [
        {
            num1: '2024-03-21 15:16:00 ',
            num2: '401办公室',
            num3: '7908',
            num4: '设备故障',
            num5: '一级',
        },
        {
            num1: '2024-03-21 15:16:00 ',
            num2: '401办公室',
            num3: '7908',
            num4: '设备故障',
            num5: '一级',
        },
        {
            num1: '2024-03-21 15:16:00 ',
            num2: '401办公室',
            num3: '7908',
            num4: '设备故障',
            num5: '一级',
        },
        {
            num1: '2024-03-21 15:16:00 ',
            num2: '401办公室',
            num3: '7908',
            num4: '设备故障',
            num5: '一级',
        },
        {
            num1: '2024-03-21 15:16:00 ',
            num2: '401办公室',
            num3: '7908',
            num4: '设备故障',
            num5: '一级',
        },
    ]
})

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

onMounted(() => {

})
onUnmounted(() => {

})
</script>
<style lang="scss" scoped>
:deep(.el-select-dropdown){
    position: none;
}
.bj_pop {
    padding: initial !important;
    border-radius: 8px;
}
</style>
<style scoped lang='scss'>
.nobj_bg {
    background: url('@/assets/images/no-bj.png') center center no-repeat;
}

.bj_bg {
    background: url('@/assets/images/bj.png') center center no-repeat;
}

.bj {
    // right: 22px;
    bottom: 22px;
    z-index: 999;
    width: 106px;
    height: 104px;
    position: absolute;
    background-size: 110% 110%;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    .bjsl {
        position: absolute;
        bottom: 15px;
        font-size: 22px;

        .unit {
            margin-left: 4px;
            vertical-align: middle;


            font-size: 16px;
        }

    }
}

.horn {
    width: 16px;
    height: 16px;
}
</style>